<template>
	<view class="add-address">
		<view class="list">
			<view class="item">
				<view class="label">
					收件人
				</view>
				<view class="input">
					<input type="text" v-model="addressInfo.name" placeholder="请输入收件人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					电话号码
				</view>
				<view class="input">
					<input type="text" v-model="addressInfo.phoneNumber" placeholder="请输入电话号码" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					所在地区
				</view>
				<view class="input" @tap="openAddress">
					<view class="text">
						{{addressInfo.city}}
					</view>
				</view>
			</view>
			<view class="item">
				<view class="label">
					详细地址
				</view>
				<view class="input">
					<input type="text" v-model="addressInfo.detailAddress " placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					设为默认地址
				</view>
				<view class="input">
					<switch color="#354e44" :checked="addressInfo.defaultStatus === 1" @change="switchChange" />
				</view>
			</view>
		</view>


		<view v-if="addressId" class="remove btn" @tap="removeAddress(addressId)">
			删除地址
		</view>
		<view class="add btn" @tap="saveAddress">
			保存
		</view>

		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import {
		requestAddAddress,
		requestRemoveAddress,
		requestDefaultAddress,
		requestUpdataAddress
	} from 'api/user/address.js';
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				addressId: '',
				addressInfo: {
					"city": "请选择城市",
					"cityCode": "",
					"defaultStatus": 0,
					"detailAddress": "",
					"id": "",
					"memberId": "",
					"name": "",
					"phoneNumber": "",
					"postCode": "",
					"province": "",
					"region": "",
				},
			}
		},
		methods: {
			// 切换修改地址还是新增地址
			switchChange(e) {
				this.addressInfo.defaultStatus = e.detail.value ? 1 : 0;
				console.log(this.addressId, this.addressInfo.defaultStatus);
				requestDefaultAddress(this.addressId, this.addressInfo.defaultStatus).then(res => {
					console.log(res);
				})
			},
			// 点击打开选择地址
			openAddress() {
				this.cityPickerValueDefault = [0, 0, 1]
				this.$refs.simpleAddress.open();
			},
			// 确定选择地址
			onConfirm(e) {
				this.addressInfo.city = e.label;
				this.addressInfo.province = e.labelArr[0];
				this.addressInfo.region = e.labelArr[2];
				this.addressInfo.cityCode = e.areaCode;
				console.log(e);
			},
			// 删除地址
			removeAddress(id) {
				let _this=this;
				uni.showModal({
				    title: '提示',
				    content: '是否删除地址',
				    success: function (res) {
				        if (res.confirm) {
							requestRemoveAddress(id).then(res=>{
								console.log(res);
								if(res.code===20000){
									_this.navigatorBack('删除地址成功');
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			// 点击确认按钮
			saveAddress() {
				console.log(this.addressInfo);
				if (this.addressId) {
					requestUpdataAddress(this.addressInfo).then(res => {
						console.log(res);
						if(res.code===20000){
							this.navigatorBack('修改地址成功');
						}
						
					})
				} else {
					requestAddAddress(this.addressInfo).then(res => {
						console.log(res);
						if(res.code===20000){
							this.navigatorBack('创建地址成功');
						}
					})
				}
			},
			// 封装的判断函数
			navigatorBack(title){
				uni.showToast({
					title,
					icon:'success'
				})
				uni.navigateBack({
					delta:1,
				})
			}
		},
		onLoad(e) {
			this.addressId = e.addressId;
			if (this.addressId) {
				this.addressInfo = uni.getStorageSync('addressChange');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-address {
		.list {
			box-sizing: border-box;
			padding: 22rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;
				line-height: 120rpx;
				font-weight: 200;
				font-size: 15px;
				border-bottom: 2rpx solid #ccc;

				.label {
					width: 210rpx;
					height: 100%;
				}

				.input {
					display: flex;
					flex: 1;
					justify-content: flex-end;
					align-items: center;
					height: 100%;

					input {
						width: 100%;
						height: 80%;
					}

					.text {
						width: 100%;
						height: 80%;
					}
				}
			}
		}

		.btn {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			width: 70%;
			height: 80rpx;
			font-size: 30rpx;
			color: #fff;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
			border-radius: 40px;
			line-height: 80rpx;
			text-align: center;
		}

		.add {
			bottom: 32rpx;
			background-color: #354e44;
		}

		.remove {
			bottom: 150rpx;
			background-color: #e64340;
		}
	}
</style>
